<template>
	<div class="">
		<input type="text">
		<span @click="getCode()">{{status?`${sec}秒后重新获取`:'获取验证码'}}</span>
	</div>
</template>
<script>

export default {
	data () {
		return {
			sec:60,
			status:false,  //true：已经在倒计时，false：静止
		}
	},
	methods:{
		// 点击获取验证码
		getCode:function(){
			if(!this.status){
				this.countDown();
			}
		},
		// 倒计时60秒
		countDown:function(){
			this.status = true;
			this.sec--;
			sessionStorage.setItem("sec",this.sec);  //写入缓存
			if(this.sec == 0){
				this.sec = 60;
				this.status = false;
			}
			else{
				setTimeout(()=>{
					this.countDown();
				},1000)
			}
		}
	},
	created(){
		// 解决刷新后倒计时失效的问题
		if(sessionStorage.sec && sessionStorage.sec!=0){
			this.sec = sessionStorage.sec;
			this.countDown();
		}
	}
}
</script>
<style lang="scss" scoped>
@import '@/style/base/border.scss';

</style>
